<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta name="misapplication-tap-highlight" content="no" />
		<meta name="HandheldFriendly" content="true" />
		<meta name="MobileOptimized" content="320" />
		<title></title>
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/base.css" />
		<style>
			header.mui-bar {
				background: #00d5c5;
			}
			
			.mui-table-view::before {
				background: none;
			}
			
			.mui-table-view::after {
				background: none;
			}
			
			header div {
				width: 60%;
				height: 80%;
				border: 1px solid #f0f0f0;
				border-radius: 5px;
			}
			
			header div span {
				color: #f0f0f0;
			}
			
			header div img {
				width: 36px;
				margin-left: 15px;
			}
			
			#tabs li {
				padding: 0px;
				background: white;
				border: none;
			}
			
			#tabs li:active {
				padding: 0px;
				background: #F0F0F0;
				border: none;
			}
			
			#tabs .tabs_height {
				height: 40px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav flex h-center v-center">
			<div onclick="goSearch()" class=" flex h-center v-center">
				<span class="flex-1 text-center">请输入搜索内容</span>
				<img src="../img/search-w.png" />
			</div>

		</header>

		<div class="mui-content">
			<!--轮播图-->
			<div id="slider" class="mui-slider">
				<div class="mui-slider-group mui-slider-loop">
					<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="../img/banner.png">
						</a>
					</div>
					<!-- 第一张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="../img/banner.png">
						</a>
					</div>
					<!-- 第二张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="../img/banner.png">
						</a>
					</div>
					<!-- 第三张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="../img/banner.png">
						</a>
					</div>
					<!-- 第四张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="../img/banner.png">
						</a>
					</div>
					<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="../img/banner.png">
						</a>
					</div>
				</div>
				<div class="mui-slider-indicator">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
				</div>
			</div>

			<!--九(6)宫格-->
			<ul id="tabs" class="mui-table-view mui-grid-view mui-grid-9">
				<li class="mui-table-view-cell mui-media mui-col-xs-4">
					<a onclick="goYuepu()" href="#">
						<span class="mui-icon">
							<img src="../img/yuepu.png"  class="tabs_height" />
						</span>
						<div class="mui-media-body">乐谱</div>
					</a>
				</li>
				<li onclick="goBanzou()" class="mui-table-view-cell mui-media mui-col-xs-4">
					<a href="#">
						<span class="mui-icon">
							<img src="../img/banzou.png" class="tabs_height" />
						</span>
						<div class="mui-media-body">伴奏</div>
					</a>
				</li>
				<li onclick="goBook()" class="mui-table-view-cell mui-media mui-col-xs-4">
					<a href="#">
						<span class="mui-icon">
							<img src="../img/book.png"  class="tabs_height" />
						</span>
						<div class="mui-media-body">书籍</div>
					</a>
				</li>
				<li onclick="goHelp()" class="mui-table-view-cell mui-media mui-col-xs-4">
					<a href="#">
						<span class="mui-icon">
							<img src="../img/help.png"  class="tabs_height" />
						</span>
						<div class="mui-media-body">求助</div>
					</a>
				</li>
				<li onclick="goAD()" class="mui-table-view-cell mui-media mui-col-xs-4">
					<a href="#">
						<span class="mui-icon">
							<img src="../img/ad.png"  class="tabs_height" />
						</span>
						<div class="mui-media-body">推广</div>
					</a>
				</li>
				<li onclick="goDongtai()" class="mui-table-view-cell mui-media mui-col-xs-4">
					<a href="#">
						<span class="mui-icon">
							<img src="../img/dongtai.png"  class="tabs_height" />
						</span>
						<div class="mui-media-body">动态</div>
					</a>
				</li>
			</ul>

			<!--图文列表居左-->
			<ul onclick="goPush(1)" class="mui-table-view">
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left" src="../img/push-1.png">
						<div class="mui-media-body">
							老师推送
							<p class="mui-ellipsis">要学习弹钢琴，首先要学习五线谱...</p>
						</div>
					</a>
				</li>

			</ul>

			<ul onclick="goPush(2)" class="mui-table-view" style="margin-top: 15px;">
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left" src="../img/push-2.png">
						<div class="mui-media-body">
							公众号推送
							<p class="mui-ellipsis">要学习弹钢琴，首先要学习五线谱...</p>
						</div>
					</a>
				</li>

			</ul>
		</div>

		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script>
			mui.init();
			var slider = mui("#slider");
			slider.slider({
				interval: 5000
			});

			function goSearch() {
				mui.openWindow({
					url: "home-search.html"
				});
			}
			function goPush(num) {
				mui.openWindow({
					url: "home-push.html"
				});
			}
			function goDongtai() {
				mui.openWindow({
					url: "home-dongtai.html"
				});
			}
			
			function goHelp(){
				mui.openWindow({
					url: "home-help.html"
				});
			}
			//书籍
			function goBook(){
				mui.openWindow({
					url: "home-book.html"
				});
			}
			//推广
			function goAD(){
				mui.openWindow({
					url: "home-ad.html"
				});
			}
			//乐谱
			function goYuepu(){
				mui.openWindow({
					url: "home-yuepu.html"
				});
			}
			//伴奏
			function goBanzou(){
				mui.openWindow({
					url: "home-banzou.html"
				});
			}
		</script>
	</body>

</html>